<template>
	<view class="">
		
		<yingbing-ReadPage ref="page" 
			:bottomGap="buttom" 
			:topGap="top" enableClick 
			:clickOption="clickOption"
			@clickTo="onClick" 
			@loadmore="onLoadmore" 
			style="height: 100vh;" />
			
		<view class="nav" style="position: fixed; top: 0; width: 100%;">
			
			<uni-transition  :mode-class="modeClass" 
				:show="show">
				<Nav bg-color="rgba(0,0,0,0.4)" >
					<view class="" style="padding: 20rpx;">
						<uni-icons type="star" size="30"></uni-icons>
					</view>
				</Nav>
			</uni-transition>
		</view>
		
		<uni-transition ref="bottom" :mode-class="modeClass2" :styles="{position:'fixed', bottom:'0px', width:'100%', backgroundColor:'rgba(0,0,0,0.4)'}"
			:show="show">
			<view class="" style="height: 300rpx;">
				底部的东西
			</view>
		</uni-transition>
		
	</view>
</template>

<script>
	import Nav from "@/components/nav.vue"
	import http from "@/utils/http.js"
	export default {
		components: {Nav},
		onLoad(p) {
			this.page_count = p.page_count
			this.article_id = p.id
			this.getContent(p.sort)
		},
	    data(){
			return {
				contents: [],
				page_count: 0,
				article_id: null,
				buttom: uni.getWindowInfo().safeAreaInsets.bottom,
				top: uni.getWindowInfo().safeAreaInsets.top,
				show: false,
				modeClass: ['fade', 'slide-top'],
				modeClass2: ['fade', 'slide-bottom'],
				clickOption: {
					width:uni.upx2px(400), height:uni.upx2px(600),left:'auto',top:'auto'
				}
			}
		},
	    methods: {
	        getContent (sort = 1, callback) {
				const _this = this
				http.get('/chapter/'+this.article_id+'?sort='+sort).then(r => {
					const chapter = {
						chapter: parseInt(r.data.sort),
						content: r.data.content,
						title: r.data.title,
						isStart: r.data.sort == "1",
						isEnd: parseInt(r.data.sort) == parseInt(_this.page_count)
					}
					
					if(callback) {
						callback('success', chapter)
					} else {
						_this.init(chapter)
					}
				})
	        },
			init(chapter){
				const { page } = this.$refs;
				page.init({
				    contents: [chapter],
				    currentChapter: 1,//从第二章节开始阅读 和章节chapter对应
				    start: 0//从章节的第100个字开始阅读
				})
			},
			
			onLoadmore(sort, callback){console.log(sort)
				this.getContent(sort, callback)
			},
			onClick(){
				this.show = !this.show
			},
			
	    }
	}
</script>

<style>
</style>